<!--
 * @Author: HYQ
 * @Date: 2021-09-29 10:44:05
 * @LastEditTime: 2021-12-01 17:13:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /my_calendar/src/components/HelloWorld.vue
-->
<template>
  <full-calendar
    :events="monthData"
    class="test-fc"
    first-day="0"
    lang="zh"
    @changeMonth="changeMonth"
    @eventClick="eventClick"
    @dayClick="dayClick"
    @moreClick="moreClick"
  ></full-calendar>
</template>

<script>
import fullCalendar from './calendar/fullCalendar.vue'
export default {
  name: 'Hello',
  components: {
    'full-calendar': fullCalendar
  },
  data () {
    return {
      /* calendar */
      monthData: [
        { id: 12, title: '事件12', start: '2021-11-27', end: '2021-12-01' },
        { id: 19, title: '事件12', start: '2021-12-03', end: '2021-12-06' },
        { id: 1, title: '事件1', start: '2021-12-02', end: '2021-12-10' }
        // { id: 11, title: '事件11', start: '2021-11-01', end: '2021-11-02' },
        // {
        //   id: 2,
        //   title: '事件2',
        //   start: '2021-11-02',
        //   end: '2021-11-12',
        //   color: 'red'
        // },
        // {
        //   id: 3,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 31,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 32,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 33,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 34,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 35,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 36,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 37,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 38,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 39,
        //   title: '事件3',
        //   start: '2021-11-03',
        //   end: '2021-11-03',
        //   cssClass: 'green'
        // },
        // {
        //   id: 4,
        //   title: '事件4',
        //   start: '2021-11-04',
        //   end: '2021-11-04',
        //   color: 'orange',
        //   editable: true
        // },
        // {
        //   id: 5,
        //   title: '事件5',
        //   start: '2021-10-05',
        //   end: '2021-11-05'
        // }
      ],
      config: {
        firstDay: 1,
        locale: 'zh-cn',
        defaultView: 'month',

        height: 'auto',
        header: {
          left: 'title',
          center: '',
          right: 'prev,today,next'
        },
        /* agenda 模式 */
        allDaySlot: false,
        slotLabelFormat: 'H:mm', // axisFormat 'H(:mm)'
        slotLabelInterval: 1,
        slotDuration: '00:30:00',
        minTime: '8:00',
        maxTime: '20:00',
        editable: true,
        /* 设置按钮文字 */
        buttonText: {
          today: '今天'
        }
      }
    }
  },
  methods: {
    // 选择月份
    changeMonth (start, end, current) {
      // console.log(
      //   'changeMonth',
      //   start.format(),
      //   end.format(),
      //   current.format()
      // )
    },
    // 点击事件
    eventClick (event, jsEvent, pos) {},
    // 点击当天
    dayClick (day, jsEvent) {},
    // 查看更多
    moreClick (day, events, jsEvent) {}
  }
}
</script>

<style>
</style>
